<template>
    <div class="resume-report">
        <div v-if="haveContentQ">
            <div class="title-text">候选人评估报告</div>

            <div style="margin:0 0 30px 0">
                <div class="title1-text">尊敬的企业用户您好：</div>
                <p
                        class="main-text"
                        style="text-indent:2em;"
                >为了让您对候选人有一个更加全面和细致的了解，为了节约您宝贵的面试时间，为了提高您对候选人综合判断的准确性，为了将候选人更加真实和内在的一面呈现在您的面前，我们特向您提供本报告。</p>
                <p class="main-text" style="text-indent:2em;">本报告共分为七大部分，分别为：</p>
                <p class="main-text" style="text-indent:2em;">第一部分：候选人基本信息；</p>
                <p class="main-text" style="text-indent:2em;">第二部分：候选人的知识与技能结构；</p>
                <p class="main-text" style="text-indent:2em;">第三部分：候选人过往经历与主要业绩描述；</p>
                <p class="main-text" style="text-indent:2em;">第四部分：候选人的个性特征与管理风格倾向；</p>
                <p class="main-text" style="text-indent:2em;">第五部分：候选人的优劣势分析；</p>
                <p class="main-text" style="text-indent:2em;">第六部分：核心胜任力构成；</p>
                <p class="main-text" style="text-indent:2em;">第七部分：推荐建议。</p>
            </div>

            <div style="margin:0 0 30px 0">
                <div class="title1-text">一、基本信息</div>
                <div class="basic-information">
                    <div class="title3-text information">姓名：</div>
                    <div class="main-text">{{info.userName}}</div>
                </div>
                <div class="basic-information">
                    <div class="title3-text information">性别：</div>
                    <div class="main-text">{{info.sex == 0?'男':'女'}}</div>
                </div>
                <div class="basic-information">
                    <div class="title3-text information">出生年份：</div>
                    <div class="main-text">{{new Date().getFullYear()-Number(info.age)}}年</div>
                </div>
                <div class="basic-information">
                    <div class="title3-text information">所在城市：</div>
                    <div class="main-text">{{info.city}}</div>
                </div>
                <div class="basic-information">
                    <div class="title3-text information">期望职位：</div>
                    <div v-for="(t,i) in info.hopeJobList" :key="i" class="main-text">{{i!==0?'&nbsp;|&nbsp;':''}}{{t.hopeLicenseStr}}
                    </div>
                </div>
                <div class="basic-information">
                    <div class="title3-text information">期望年薪：</div>
                    <div v-for="(t,i) in info.hopeJobList" :key="i" class="main-text">
                        {{i!==0?'&nbsp;|&nbsp;':''}}{{t.salaryPerMonthLow+'-'+t.salaryPerMonthHigh}} W
                        <span>/{{t.yearNum}} 年</span>
                    </div>
                </div>
            </div>

            <div style="margin:0 0 30px 0">
                <div class="title1-text">二、知识与技能</div>
                <div class="knowledge-skill experience">
                    <div class="experience-left title2-text">教育经历：</div>
                    <div class="experience-right">
                        <div v-for="(education,i) in info.educationList" :key="i" class="knowledge-skill-content">
                            <div class="main-head-text">{{education.school}}</div>
                            <div style="margin-left:20px" class="sub-text">
                                {{getDate(education.startTime)}}/{{getDate(education.endTime)}}
                            </div>
                            <div style="margin-left:20px" class="main-text knowledge-content">
                                <span>{{education.major}}</span>
                                <span style="margin-left: 15px;margin-right: 15px">|</span>
                                <span>{{education.academicStr}}</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="knowledge-skill experience">
                    <div class="experience-left title2-text">人才亮点：</div>
                    <div class="experience-right">
                        <div v-for="(t,i) in info.licenseList" :key="i" class="knowledge-skill-content">
                            <div class="main-head-text">
                                {{t.licenseTypeStr}}&nbsp;
                                <span class="title3-text">{{t.licenseNum}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin:0 0 30px 0">
                <div class="title1-text">三、过往经历与业绩描述</div>
                <div class="experience">
                    <div class="title2-text experience-left">工作经历：</div>
                    <div class="experience-right">
                        <div class="experience-company"
                             v-for="jobExcucation in info.jobList">
                            <div class="company-top">
                                <div class="main-head-text">{{jobExcucation.companyName}}</div>
                                <div class="sub-text">
                                    {{getDate(jobExcucation.jobStartTime)}}/{{getDate(jobExcucation.jobEndTime)}}
                                </div>
                            </div>
                            <div class="main-text company-top">
                                <span>{{jobExcucation.jobName}}</span>
                                <span style="margin-left: 15px;margin-right: 15px">|</span>
                                <span>{{jobExcucation.licenseTypeStr}}</span>
                                <span style="margin-left: 15px;margin-right: 15px">|</span>
                                <span>{{jobExcucation.companyTypeStr}}</span>
                                <span style="margin-left: 15px;margin-right: 15px">|</span>
                                <span>{{jobExcucation.workCity}}</span>
                            </div>
                            <p v-html="jobExcucation.jobContent" class="main-text">

                            </p>
                        </div>
                    </div>
                </div>
                <div class="experience">
                    <div class="title2-text experience-left">项目经验：</div>
                    <div class="experience-right">
                        <div class="experience-company"
                             v-for="projectExcucation in info.projectList">
                            <div class="company-top">
                                <div class="main-head-text">{{projectExcucation.projectName}}</div>
                                <div class="sub-text">{{getDate(projectExcucation.projectStartTime)}}/
                                    {{getDate(projectExcucation.projectEndTime)}}
                                </div>
                            </div>

                            <p v-html="projectExcucation.projectContent" class="main-text">

                            </p>
                        </div>

                    </div>
                </div>
            </div>
            <div style="margin:0 0 30px 0">
                <div class="title1-text">四、个性特征与管理风格倾向</div>
                <div class="title1-text individuation">该候选人主要符合以下{{reportInfo.featureNum}}项个性与行为特征：</div>
                <div class="experience">
                    <div class="title3-text experience-left individuations">影响性：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">{{reportInfo.influence}}</p>
                        </div>
                    </div>
                </div>
                <div class="experience">
                    <div class="title3-text experience-left individuations">情感性：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.emotion}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="experience">
                    <div class="title3-text experience-left individuations">独立性：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">{{reportInfo.independence}}</p>
                        </div>
                    </div>
                </div>
                <div class="experience">
                    <div class="title3-text experience-left individuations">自律性：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.selfdiscipline}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin:0 0 30px 0">
                <div class="title1-text">五、优劣势分析</div>
                <div class="experience">
                    <div class="title2-text experience-left individuations">优势：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.advantage}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="experience">
                    <div class="title2-text experience-left individuations">劣势：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.disAdvantage}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin:0 0 30px 0">
                <div class="title1-text">六、核心胜任力构成</div>
                <div class="title1-text individuation">该候选人核心胜任力主要有以下{{reportInfo.coreCompetencyNum}}大要素：</div>

                <div class="experience" v-if="reportInfo.personalUnderstanding">
                    <div class="title3-text experience-left individuations">人际理解力：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">{{reportInfo.personalUnderstanding}}</p>
                        </div>
                    </div>
                </div>

                <div class="experience" v-if="reportInfo.inflencePower">
                    <div class="title3-text experience-left individuations">影响力：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.inflencePower}}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="experience" v-if="reportInfo.communicationAbility">
                    <div class="title3-text experience-left individuations">沟通协调能力：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.communicationAbility}}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="experience" v-if="reportInfo.leaderShip">
                    <div class="title3-text experience-left individuations">团队领导能力：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.leaderShip}}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="experience" v-if="reportInfo.responsibility">
                    <div class="title3-text experience-left individuations">责任感：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.responsibility}}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="experience" v-if="reportInfo.analytic">
                    <div class="title3-text experience-left individuations">分析思维：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">{{reportInfo.analytic}}</p>
                        </div>
                    </div>
                </div>

                <div class="experience" v-if="reportInfo.planningAbility">
                    <div class="title3-text experience-left individuations">计划组织能力：</div>
                    <div class="experience-right">
                        <div class="experience-company">
                            <p class="main-text">
                                {{reportInfo.planningAbility}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin:0 0 30px 0">
                <div class="title1-text">七、推荐建议</div>
                <div class="title1-text individuation">对于该候选人我们的建议是：</div>
                <p
                        class="main-text"
                >{{reportInfo.recommenDations}}</p>
            </div>
            <div class="watermark watermark1"></div>
            <!--<div class="watermark watermark2"></div>-->
            <!--<div class="watermark watermark3"></div>-->
        </div>
        <div v-if="!haveContentQ" style="display:flex;flex-direction:column;align-items:center;">
            <p style="font-size:24px;font-weight:400;color:rgba(51,51,51,1);line-height:18px;align-items:center;margin-top:150px">
                该人才暂无推荐报告</p>
            <!--<p style="font-size:18px;font-weight:400;color:rgba(102,102,102,1);line-height:18px;margin-top:29px;margin-bottom: 150px;">-->
            <!--该人才暂无推荐报告，了解更多信息，请联系该企业专属顾问</p>-->
        </div>
    </div>
</template>

<script>

  import * as _ from 'underscore'

  export default {
    props: {
      item: {
        type: Object,
        default() {
          return {}
        }
      },
      companyId: {
        type: Number,
        default: 0
      },
      jobId: {
        type: Number,
        default: 0
      },
      talentId: {
        type: Number,
        default: 0
      }
    },
    watch: {
      talentId: {
        immediate: true,
        handler(n) {
          if (n) {
            console.log('start load report')
            this.loadReport(n)
          }
        }
      }
      // item: {
      //   immediate: true,
      //   handler(n) {
      //     if (n) {
      //       console.log('pass report', n)
      //       //1.拿到简历信息
      //       this.info = n
      //       //2.获取推荐报告信息
      //       this.selReportInfo()
      //     } else {
      //       console.log('resume dialog reset')
      //       for (let col in this.reportInfo) {
      //         this.reportInfo[col] = ''
      //       }
      //     }
      //   }
      // }
    },
    data() {
      return {
        haveContentQ: false,
        info: {},
        reportInfo: {},
        report: {
          name: '',
          sex: '',
          birth: '',
          city: '',
          hopeJob: '',
          hopeSalary: '',
          educations: []
        }
      }
    },
    methods: {
      loadTalent(id) {
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectOnlineResume.do',
          params: { 'talentId': id }
        }).then(res => {
          res = res.data
          if (res && res.status === 0) {
            console.log('load report info part', res)
            const response = res.data
            this.info = {
              userName: response.talent.talentName,
              sex: response.talent.sex,
              age: response.talent.talentAge,
              city: response.talent.workCity,
              jobName: _.map(response.hopeJobList, t => {
                return t.hopeCompanyTypeStr
              }).join(','),
              hopeJobList: response.hopeJobList,
              educationList: response.educationList,
              jobList: response.jobList,
              projectList: response.projectList,
              licenseList: response.licenseList
            }
          }
        })
      },
      loadReport(id) {
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectReportTemplate.do',
          params: { companyId: this.companyId, jobId: this.jobId, talentId: id }
        }).then(res => {
          res = res.data
          console.log('load report report result', res)
          if (res && res.status === 0) {
            const response = res.data
            this.haveContentQ = true
            //加载上部分信息
            this.loadTalent(id)
            //推荐报告信息
            this.reportInfo = response ? response : {}
          } else if (res.status === 1) {
            this.haveContentQ = false
          }
        })
      },
      getDate(s) {
        return new Date(s).format('yyyy-MM-dd')
      },
      selReportInfo() {
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectReportTemplate.do',
          params: {
            talentId: this.item.talentId,
            jobId: this.item.jobId,
            companyId: this.item.companyId
          }
        }).then(res => {
          res = res.data
          if (res) {
            if (res.status === 0) {
              this.haveContentQ = true
              this.reportInfo = res.data
              console.log('server report', this.reportInfo)
            } else if (res.status == 1) {
              this.haveContentQ = false
              // window._$vm.$message.warning(res.msg)
            }
          }
        })
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
    .resume-report {
        padding: 30px 50px;
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;

        //标题文字样式
        .title-text {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            line-height: 36px;
            text-align: center;
        }

        //一级标题文字
        .title1-text {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            line-height: 36px;
        }

        //二级标题文字
        .title2-text {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            line-height: 36px;
        }

        //三级标题文字
        .title3-text {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            line-height: 36px;
        }

        //主要文字的标题
        .main-head-text {
            font-size: 16px;
            color: #555;
            font-weight: bold;
        }

        //主要文字样式
        .main-text {
            font-size: 14px;
            font-weight: 400;
            color: #666;
            line-height: 24px;
        }

        .sub-text {
            font-size: 12px;
            color: #999;
            font-weight: 400;
            margin-left: 20px;
        }

        .individuation {
            font-weight: 400;
            line-height: 36px;
        }

        .individuations {
            line-height: 24px;
        }

        //基本信息样式
        .basic-information {
            display: flex;

            .main-text {
                line-height: 36px;

                span {
                    font-size: 10px;
                    color: #666;
                }
            }

            .information {
                width: 100px;
                flex-shrink: 0;
                flex-grow: 0;
                font-weight: 400;
            }
        }

        //知识技能样式
        .knowledge-skill {
            display: flex;

            .knowledge-skill-content {
                width: fit-content;
                line-height: 36px;
                display: flex;
                justify-content: space-between;

                .sub-text {
                    font-size: 14px;
                }

                .knowledge-content {
                    width: fit-content;
                    display: flex;
                    justify-content: space-between;
                    line-height: 36px;
                }
            }
        }

        //经历样式
        .experience {
            display: flex;
            justify-content: space-between;

            .experience-left {
                width: 100px;
                flex-shrink: 0;
                flex-grow: 0;
            }

            .experience-right {
                width: 100%;

                .experience-company {
                    margin: 0 0 20px 0;

                    .company-top {
                        line-height: 36px;
                        width: fit-content;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }

        .watermark {
            width: 51px;
            height: 48px;
            z-index: 3;
            position: absolute;
            background: url('../../../assets/img/communication/shuiyin.png') no-repeat center;
            background-size: cover;
        }

        .watermark1 {
            left: 40px;
            top: 10px;
        }

        .watermark2 {
            left: 435px;
            top: 1200px;
            margin-top: -95px;
        }

        .watermark3 {
            right: 202px;
            top: 1700px;
        }
    }
</style>
